<div id="captcha">
  <div id="text">
    行为验证™ 安全组件加载中
  </div>
  <div id="wait" class="show">
    <div class="loading">
      <div class="loading-dot"></div>
      <div class="loading-dot"></div>
      <div class="loading-dot"></div>
      <div class="loading-dot"></div>
    </div>
  </div>
</div> 

<div id="btn" class="btn">提交</div>

<script src="../../js/jquery-1.8.3.min.js"></script>
<script src="./gt.js"></script>
<script>
  $.ajax({
    url: "https://www.geetest.com/demo/gt/register-slide?t=" + (new Date()).getTime(), // 加随机数防止缓存
    type: "get",
    dataType: "json",
    success: function (data) {

      $('#text').hide();
      $('#wait').show();
      // 调用 initGeetest 进行初始化
      // 参数1：配置参数
      // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
      initGeetest({
        // 以下 4 个配置参数为必须，不能缺少
        gt: data.gt,
        challenge: data.challenge,
        offline: !data.success, // 表示用户后台检测极验服务器是否宕机
        new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机

        product: "popup", // 产品形式，包括：float，popup
        width: "300px",
        https: true

        // 更多配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
      }, function (captchaObj) {
        captchaObj.appendTo('#captcha');
        captchaObj.onReady(function () {
          $("#wait").hide();
        });

        // 点击之后
        $('#btn').click(function () {
          // 判断行为验证码
          let result = captchaObj.getValidate();
          if (!result) {
            return alert('请完成验证');
          }
          // 通过行为验证码操作
          alert('通过验证')
        })

        // 更多接口说明请参见：http://docs.geetest.com/install/client/web-front/
        window.gt = captchaObj;
      });
    }
  });
</script>